<template>
  <div class="li-card">
    <div class="li-card-header">
        <!-- 头部：应该是使用组件的时候传入进来 -->
      <slot name="header"></slot>
    </div>
    <div class="li-card-body">
        <!-- 内容：应该是使用组件的时候传入进来 -->
        <slot ></slot>
    </div>
  </div>
</template>

<script>
export default {
  
};
</script>

<style lang="less" scoped>
.li-card {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  box-shadow: 1px 2px 12px  rgba(0, 0, 0, .3);

  .li-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
    padding: 14px 20px;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
     background: linear-gradient(to right, pink, red);
     color: #fff;
     button{
        background: transparent;
        outline: none;
        border: none;
        color: #fff;
        font-size: 16px;
     }
  }
  .li-card-body {
    padding: 20px;
  }
}
</style>